//点击四个圆圈实现圆圈变红 
var imgContainer = document.getElementsByClassName("imgContainer")[0];
var circleArray = imgContainer.getElementsByTagName("div");
//点击第一个按钮
//红点
var page1One = document.getElementsByClassName("page1One")[0];
//横杠
var page1Two = document.getElementsByClassName("page1Two")[0];
//发动机
var page1Three = document.getElementsByClassName("page1Three")[0];
//字儿
var page1Four = document.getElementsByClassName("page1Four")[0];

circleArray[0].onclick = function(){
	circleArray[0].style.background = "url(img/page3_choosed_bg.png)";
	circleArray[0].style.backgroundSize = "100% 100%";
	circleArray[1].style.background = "url(img/4575_1453779105.png)";
	circleArray[1].style.backgroundSize = "100% 100%";
	circleArray[2].style.background = "url(img/4575_1453779105.png)";
	circleArray[2].style.backgroundSize = "100% 100%";
	circleArray[3].style.background = "url(img/4575_1453779105.png)";
	circleArray[3].style.backgroundSize = "100% 100%";
	page1One.style.display = "block";
	page1Two.style.display = "block";
	page1Three.style.display = "block";
	page1Four.style.display = "block";

	page2One.style.display = "none";
	page2Two.style.display = "none";
	page2Three.style.display = "none";
	page2Four.style.display = "none";

	page3One.style.display = "none";
	page3Two.style.display = "none";
	page3Three.style.display = "none";
	page3Four.style.display = "none";

	page4One.style.display = "none";
	page4Two.style.display = "none";
	page4Three.style.display = "none";
	page4Four.style.display = "none";	
}
//dot
var page2One = document.getElementsByClassName("page2One")[0];
//横杠
var page2Two = document.getElementsByClassName("page2Two")[0];
//车
var page2Three = document.getElementsByClassName("page2Three")[0];
//字儿
var page2Four = document.getElementsByClassName("page2Four")[0];
circleArray[1].onclick = function(){
	circleArray[1].style.background = "url(img/page3_choosed_bg.png)";
	circleArray[1].style.backgroundSize = "100% 100%";
	circleArray[0].style.background = "url(img/4575_1453779105.png)";
	circleArray[0].style.backgroundSize = "100% 100%";
	circleArray[2].style.background = "url(img/4575_1453779105.png)";
	circleArray[2].style.backgroundSize = "100% 100%";
	circleArray[3].style.background = "url(img/4575_1453779105.png)";
	circleArray[3].style.backgroundSize = "100% 100%";
	page2One.style.display = "block";
	page2Two.style.display = "block";
	page2Three.style.display = "block";
	page2Four.style.display = "block";
	
	page1One.style.display = "none";
	page1Two.style.display = "none";
	page1Three.style.display = "none";
	page1Four.style.display = "none";

	page3One.style.display = "none";
	page3Two.style.display = "none";
	page3Three.style.display = "none";
	page3Four.style.display = "none";

	page4One.style.display = "none";
	page4Two.style.display = "none";
	page4Three.style.display = "none";
	page4Four.style.display = "none";
	
}


//dot
var page3One = document.getElementsByClassName("page3One")[0];
//横杠
var page3Two = document.getElementsByClassName("page3Two")[0];
//车
var page3Three = document.getElementsByClassName("page3Three")[0];
//字儿
var page3Four = document.getElementsByClassName("page3Four")[0];
//亮点
var page3Five = document.getElementsByClassName("page3Five")[0];
circleArray[2].onclick = function(){
	circleArray[2].style.background = "url(img/page3_choosed_bg.png)";
	circleArray[2].style.backgroundSize = "100% 100%";
	circleArray[0].style.background = "url(img/4575_1453779105.png)";
	circleArray[0].style.backgroundSize = "100% 100%";
	circleArray[1].style.background = "url(img/4575_1453779105.png)";
	circleArray[1].style.backgroundSize = "100% 100%";
	circleArray[3].style.background = "url(img/4575_1453779105.png)";
	circleArray[3].style.backgroundSize = "100% 100%";
	page3One.style.display = "block";
	page3Two.style.display = "block";
	page3Three.style.display = "block";
	page3Four.style.display = "block";
	
	page1One.style.display = "none";
	page1Two.style.display = "none";
	page1Three.style.display = "none";
	page1Four.style.display = "none";
	
	page2One.style.display = "none";
	page2Two.style.display = "none";
	page2Three.style.display = "none";
	page2Four.style.display = "none";
	
	page4One.style.display = "none";
	page4Two.style.display = "none";
	page4Three.style.display = "none";
	page4Four.style.display = "none";
	
}


//dot
var page4One = document.getElementsByClassName("page4One")[0];
//横杠
var page4Two = document.getElementsByClassName("page4Two")[0];
//车
var page4Three = document.getElementsByClassName("page4Three")[0];
//字儿
var page4Four = document.getElementsByClassName("page4Four")[0];

circleArray[3].onclick = function(){
	circleArray[3].style.background = "url(img/page3_choosed_bg.png)";
	circleArray[3].style.backgroundSize = "100% 100%";
	circleArray[0].style.background = "url(img/4575_1453779105.png)";
	circleArray[0].style.backgroundSize = "100% 100%";
	circleArray[1].style.background = "url(img/4575_1453779105.png)";
	circleArray[1].style.backgroundSize = "100% 100%";
	circleArray[2].style.background = "url(img/4575_1453779105.png)";
	circleArray[2].style.backgroundSize = "100% 100%";
	page4One.style.display = "block";
	page4Two.style.display = "block";
	page4Three.style.display = "block";
	page4Four.style.display = "block";
	
	page1One.style.display = "none";
	page1Two.style.display = "none";
	page1Three.style.display = "none";
	page1Four.style.display = "none";
	
	page2One.style.display = "none";
	page2Two.style.display = "none";
	page2Three.style.display = "none";
	page2Four.style.display = "none";
	
	page3One.style.display = "none";
	page3Two.style.display = "none";
	page3Three.style.display = "none";
	page3Four.style.display = "none";
	
}
$(".page3_btn_start").on("touchstart",function(){
	$("#container1").hide();
	$(".video").eq(0).show();
	$(".wrap").eq(0).show();
});



